<template>
    <page-container>
        <view slot="header">
            <cu-custom :isBack="true" bgColor="bg-white">
                <block slot="content">主播列表</block>
            </cu-custom>
        </view>
        <view slot="center" class="auto-100" style="background-color:#F4F4F4">
            <mescroll :ref="'mescrollRef' + i" height="100%" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
                <view class="anchor-list-box">
                    <view class="anchor-list-row df-cen-rl" v-for="(item, inx) in anchorList" :key="inx" @click="anchorItemBtn(item)">
                        <view class="df-ai-cen">
                            <view class="cu-avatar xl round margin-right" :style="'background-image: url(' + $util.img(item.image) + ')'"></view>
                            <view>
                                <view class="df-ai-cen">
                                    <view class="anchor-row-title">{{ item.title }}</view>
                                    <view class="anchor-row-views df-ai-cen">
                                        <view class="cu-avatar sm round" style="background-image: url(https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/video_top.png)"></view>
                                        <view class="anchor-row-text">{{ item.views }}观看</view>
                                    </view>
                                </view>
                                <view class="line-text live-desc">{{ item.description }}</view>
                            </view>
                        </view>
                        <button class="cu-btn round bg-orange-red shadow sm">观看</button>
                    </view>
                </view>
            </mescroll>
        </view>
    </page-container>
</template>

<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
import pageContainer from '../../common/components/global/page-container.vue'
export default {
	components: { pageContainer },
	mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	data() {
		return {
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				// page: {
				// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				// 	size: 10 // 每页数据的数量
				// },
				noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			anchorList: [] // 列表数据
		}
	},
	onLoad(e) { },
	onShow(e) { },
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
			console.log('emescroll', e)
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			// 联网加载数据
			console.log('log', page.num, page.size)
			let newObj = {
				page: page.num,
				page_size: page.size,
				pushing: 1
			}
			this.$request
				.getLiveList(newObj)
				.then(res => {
					console.log(res, 'rererer')
					// 设置列表数据
					if (page.num == 1) this.anchorList = [] // 如果是第一页需手动制空列表
					this.anchorList = this.anchorList.concat(res.data.list) // 追加新数据
					this.mescroll.endSuccess(res.data.list.length) // 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					// console.log('log', this.anchorList);
				})
			// .catch(() => {
			// 	// 联网失败, 结束加载
			// 	this.mescroll.endErr()
			// })
		},
		anchorItemBtn(val) {
			this.$util.redirectTo('/livePages/live/live', {
				live_id: val.id
			})
		}
	},
	mounted() { }
}
</script>

<style lang="scss">
/deep/.mescroll-uni {
    height: 100% !important;
}
.anchor-list-box {
    padding: 0 26rpx;
    .anchor-list-row {
        margin-top: 24rpx;
        padding: 30rpx 24rpx;
        border-radius: 12rpx;
        background: #ffffff;
        .anchor-row-title {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #222222;
            max-width: 160rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .anchor-row-views {
            margin-left: 10rpx;
            padding: 4rpx 10rpx 4rpx 0;
            border-radius: 30rpx;
            background-color: rgba(0, 0, 0, 0.4);
            .anchor-row-text {
                margin-left: 4rpx;
                font-size: 14rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
            }
        }
        .live-desc {
            margin-top: 20rpx;
            width: 360rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
        }
    }
}
</style>
